<template>
  <div class="container">
    <!-- 查看题目详情 -->
    <el-dialog
      title="题目预览"
      :visible.sync="isOpenPanel"
      width="60%"
      :before-close="handleClose"
    >
      <div class="containerbox">
        <div class="messagebox">
          <el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                【题型】：{{ cloneQuestionInfo.questionType }}
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                【编号】：{{ cloneQuestionInfo.id }}
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                【难度】：{{ cloneQuestionInfo.difficulty }}
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                【标签】：{{ cloneQuestionInfo.tags }}
              </div></el-col
            >
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                【学科】：{{ cloneQuestionInfo.subjectName }}
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                【目录】：{{ cloneQuestionInfo.directoryName }}
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                【方向】：{{ cloneQuestionInfo.direction }}
              </div></el-col
            >
          </el-row>
        </div>
        <div class="contentbox">
          <el-row> 【题干】： </el-row>
          <el-row>
            <div v-html="cloneQuestionInfo.question">
              {{ cloneQuestionInfo.question }}
            </div>
          </el-row>
          <el-row>
            {{ cloneQuestionInfo.questionType }}
            <span>选项 : (以下选中的选项为正确答案)</span>：
          </el-row>
          <el-row class="checked">
            <el-checkbox-group
              v-model="checkedChoiceList"
              v-if="cloneQuestionInfo.questionType === '多选'"
            >
              <el-checkbox
                v-for="item in cloneQuestionInfo.options"
                :label="item.title"
                :key="item.id"
                >{{ item.title }}</el-checkbox
              >
            </el-checkbox-group>
            <el-radio-group
              v-model="checkedChoice"
              v-else-if="cloneQuestionInfo.questionType === '单选'"
            >
              <el-radio
                v-for="item in cloneQuestionInfo.options"
                :label="item.title"
                :key="item.id"
                >{{ item.title }}</el-radio
              >
            </el-radio-group>
            <div v-html="cloneQuestionInfo.question" v-else>
              {{ cloneQuestionInfo.question }}
            </div>
          </el-row>
        </div>
        <div class="answerbox">
          <el-row>
            【参考答案】：<span v-html="cloneQuestionInfo.answer">{{
              cloneQuestionInfo.answer
            }}</span>
          </el-row>
        </div>
        <div class="answerbox">
          <el-row>
            【答案解析】：<el-button type="danger" @click="showVideo"
              >视频答案预览</el-button
            >
          </el-row>
          <el-row>
            <div v-if="isShowVideo">
              <video
                id="myVideo"
                class="video-js"
                controls
                width="100%"
                height="100%"
              >
                <source type="video/mp4" :src="cloneQuestionInfo.videoURL" />
              </video>
            </div>
          </el-row>
        </div>
        <div class="lastanswerbox">
          <el-row>
            【题目备注】：<span>{{ cloneQuestionInfo.remarks }}</span>
          </el-row>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closePanel">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: [
    'cloneQuestionInfo',
    'isOpenPanel',
    'checkedChoiceList',
    'checkedChoice'
  ],
  data () {
    return {
      isShowVideo: false
    }
  },
  created () {
    this.initVideo()
  },
  methods: {
    handleClose () {
      this.closePanel()
    },
    closePanel () {
      this.$emit('closePanel')
      this.isShowVideo = false
    },
    showVideo () {
      console.log(this.cloneQuestionInfo.videoURL)
      this.isShowVideo = true
    },
    initVideo () {
      // 初始化视频方法
      this.$video(document.getElementById('myVideo'), {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        // 自动播放属性,muted:静音播放
        autoplay: 'muted',
        // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: 'auto',
        // 设置视频播放器的显示宽度（以像素为单位）
        width: '400px',
        // 设置视频播放器的显示高度（以像素为单位）
        height: '300px'
      })
    }
  }
}
</script>

<style scoped lang="less">
.containerbox {
  .messagebox {
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
    .el-row {
      margin: 10px 0 15px;
    }
  }
  .contentbox {
    margin: 20px 0;
    border-bottom: 1px solid #000;
    padding-bottom: 20px;
    .checked {
      margin-top: 20px;
    }
  }
  .answerbox {
    margin: 20px 0;
    border-bottom: 1px solid #000;
    padding-bottom: 20px;
  }
  .lastanswerbox {
    margin: 20px 0;
    padding-bottom: 20px;
  }
  .videoPlayer {
    width: 400px;
    height: 300px;
  }
  #myVideo {
    margin-top: 20px;
  }
}
</style>
